<template>
  <div>
    <div @click="drawer = true">点击筛选</div>
    <el-drawer
      title="我是标题"
      size="300px"
      :visible.sync="drawer"
      :with-header="false"
    >
      <div style="margin-left: 10px">
        <div class="list">
          <div
            v-for="item in arr"
            class="listItem"
            :key="item"
            :class="{ highlighted: item === selectedItem }"
            @click="selectItem(item)"
          >
            <div>{{ item }}</div>
          </div>
        </div>
        <h3>价格区间</h3>
        <div class="price">
          <input type="text" v-model="price" />
          -
          <input type="text" v-model="prices" />
        </div>
        <h3>屏幕尺寸</h3>
        <div class="list">
          <div
            v-for="item in size"
            class="listItem2"
            :key="item"
            :class="{ highlighted: item === selectedItem2 }"
            @click="selectItem2(item)"
          >
            <div>{{ item }}</div>
          </div>
        </div>
        <h3>内存容量</h3>
        <div class="list">
          <div
            v-for="item in capacity"
            class="listItem3"
            :key="item"
            :class="{ highlighted: item === selectedItem3 }"
            @click="selectItem3(item)"
          >
            <div>{{ item }}</div>
          </div>
        </div>
        <el-button style="margin-top: 10px; margin-left: 200px" @click="confirm"
          >确定</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Demo2Screen",

  data() {
    return {
      // 筛选弹框的状态
      drawer: false,
      // 筛选头部数据
      arr: [
        "分期免息",
        "二手",
        "货到付款",
        "京东超市",
        "211限时达",
        "促销",
        "同城速配",
        "包邮",
      ],
      // 屏幕尺寸
      size: ["13.0英寸以下", "13.0-13.9英寸", "14.0-14.9英寸"],
      // 内存容量
      capacity: [
        "4GB",
        "6GB",
        "8GB",
        "9GB",
        "12GB",
        "16GB",
        "20GB",
        "24GB",
        "32GB",
        "36GB",
        "40GB",
        "64GB",
      ],
      // 点击头部的数据
      selectedItem: "",
      //点击屏幕尺寸的数据
      selectedItem2: "",
      //点击内存容量的数据
      selectedItem3: "",
      // 价格区间左
      price: "",
      // 价格区间右
      prices: "",
      // 所有的数据
      datas: [],
    };
  },
  mounted() {
    this.huoqu();
  },

  methods: {
    // 获取到点击头部的数据
    selectItem(item) {
      this.selectedItem = item;
    },
    // 获取到点击屏幕尺寸的数据
    selectItem2(item) {
      this.selectedItem2 = item;
    },
    // 获取到点击内存容量的数据
    selectItem3(item) {
      this.selectedItem3 = item;
    },
    // 确定按钮
    confirm() {
      console.log(123);

      console.log(this.datas, "数据");
      let obj = {};
      // 判断是否为selectedItem
      if (this.selectedItem) {
        console.log(this.selectedItem, "7777");
        obj["selectedItem"] = this.selectedItem;
      }
      // 判断是否为selectedItem2
      if (this.selectedItem2) {
        console.log(this.selectedItem2, "88888");
        obj["selectedItem2"] = this.selectedItem2;
      }
      // 判断是否为selectedItem3
      if (this.price !== "" && this.prices !== "") {
        obj["price"] = [this.price, this.prices];
      }
      // 多条件查询
      let aa = this.datas.filter((item) => {
        return Object.keys(obj).every((key) => {
          if (Array.isArray(obj[key])) {
            return item[key] >= obj[key][0] && item[key] <= obj[key][1];
          } else {
            return item[key] === obj[key];
          }
        });
      });

      console.log(aa, "cvb");
    },
    // 获取到所有的数据
    async huoqu() {
      let { data } = await axios.get("/good.json");
      this.datas = data;
    },
  },
};
</script>

<style  scoped>
.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 10px;
}
.listItem {
  width: 20vw;
  margin: 5px 10px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: rgb(242, 242, 242);
  border-radius: 10px;
}
.listItem2 {
  margin: 5px 10px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: rgb(242, 242, 242);
  border-radius: 10px;
}
.listItem3 {
  width: 20vw;
  margin: 5px 10px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: rgb(242, 242, 242);
  border-radius: 10px;
}
.listItem:last-child {
  margin-right: 108px;
}
.price {
  display: flex;
}
input {
  width: 100px;
  outline: none;
  border: 0;
  background: rgb(240, 240, 240);
  border-radius: 10px;
  padding-left: 10px;
}
.highlighted {
  background-color: yellow;
}
</style>